<template>
    <div class="search-box-pax" :style="{ top: `-${top_num}px` }">
        <!-- <div class="lower-icon" @click="showSelectFun">
            <i
                :class="
                    is_select_show_list
                        ? 'el-icon-arrow-up'
                        : ' el-icon-arrow-down'
                "
            ></i>
            <text class="icon-font search-icon">&#xe618;</text>
        </div> -->
        <view
            class="arrow-search"
            @click="showSelectFun"
            :style="
                is_select_show_list
                    ? 'transform: rotate(180deg); '
                    : ''
            "
        >
            <text class="icon-font search-icon">&#xe618;</text>
        </view>
        <div class="input-box">
            <el-input
                v-model="searchform.kw"
                :placeholder="placeholder ? `请输入${placeholder}` : ''"
                @focus="focusFun"
                @input="inputFun"
                @keyup.enter.native="accountLogin()"
            ></el-input>
        </div>
        <!-- <div class="lower-icon" @click="searchFun">
            <i :class="is_focus ? 'el-icon-error' : 'el-icon-search'"></i>
        </div> -->
        <view
            class="i-search"
            @click="searchFun">
            <text class="icon-font search-icon">{{
                is_focus ? "\ue64a" : "\ue605"
            }}</text>
        </view>
        <div
            class="list-select list-zindex"
            :class="!is_select_show_list ? 'list-acitve' : ''"
            :style="{
                backgroundColor: is_select_show_list
                    ? 'rgba(0, 0, 0, 0.4)'
                    : 'rgba(0, 0, 0, 0)',
                left: !isExpand ? 72 + 'px' : 240 + 'px',
            }"
            @click="is_select_show_list = !is_select_show_list"
        >
            <div
                class="type-list-box"
                :style="{ top: is_select_show_list ? '0' : '-200px' }"
            >
                <div
                    class="list-row"
                    :class="item.is_acitve ? 'acitve' : ''"
                    v-for="(item, index) in search_type_data"
                    :key="index"
                    @click="cheSelectvalue(item)"
                >
                    {{ item.name }}
                </div>
            </div>
        </div>
        <div
            class="list-select"
            :class="!is_data_show_list ? 'list-acitve' : ''"
            v-show="is_data_show_list"
            :style="{
                left: !isExpand ? 72 + 'px' : 240 + 'px',
            }"
        >
            <div class="data-list-box">
                <div class="total-box">共搜索到{{ total }}条</div>
                <div
                    class="preselection-list-box comm-list"
                    v-if="
                        is_show_preselection &&
                        preselection_list &&
                        preselection_list.length > 0
                    "
                >
                    <div
                        class="list-row"
                        v-for="(item, index) in preselection_list"
                        :key="index"
                        @click="preselectionFun(item)"
                    >
                        <div class="title-box">
                            <span>{{ item.title }}（{{ item.num }}）</span>
                        </div>
                        <div class="inon-box">
                            <i class="el-icon-arrow-right"></i>
                        </div>
                    </div>
                </div>
                <div
                    class="tips-list-box comm-list"
                    v-else-if="
                        is_show_resultTips &&
                        resultTips_list &&
                        resultTips_list.length > 0
                    "
                >
                    <div
                        class="list-row"
                        v-for="(item, index) in resultTips_list"
                        :key="index"
                        @click="resultTipsFun(item)"
                    >
                        <div class="title-box">
                            <span>{{ item.title }}</span>
                        </div>
                        <div class="inon-box">
                            <i class="el-icon-arrow-right"></i>
                        </div>
                    </div>
                </div>
                <div
                    class="customer-list-box comm-list"
                    v-infinite-scroll="loadFun"
                    v-else-if="
                        is_show_customer_list &&
                        customer_list_data &&
                        customer_list_data.length > 0
                    "
                >
                    <div
                        class="list-row"
                        v-for="(item, index) in customer_list_data"
                        :key="index"
                        @click="determineFun(item)"
                    >
                        <div class="img-box">
                            <img
                                v-if="item.avatar || item.imgs"
                                :src="item.avatar || item.imgs"
                            />
                            <span v-else-if="item.name">{{
                                item.name.split("")[0]
                            }}</span>
                        </div>
                        <div class="info-box">
                            <div class="title">
                                <span>{{ item.name || item.title }}</span>
                                <span v-if="item.company"
                                    >-{{ item.company }}</span
                                >
                            </div>
                            <div class="phone">
                                <span>{{
                                    item.cellphone || item.txt_title
                                }}</span>
                            </div>
                            <div class="price">
                                <span>{{ item.price }}</span>
                            </div>
                            <div class="tag-box">
                                <span
                                    v-for="(
                                        tag_item, tag_index
                                    ) in item.tagsInfo"
                                    :key="tag_index"
                                    :style="{
                                        backgroundColor:
                                            item.onsale == '2' && tag_index == 0
                                                ? '#999'
                                                : color_data[tag_index],
                                    }"
                                    >{{ tag_item }}</span
                                >
                            </div>
                        </div>
                    </div>
                </div>
                <empty v-else />
            </div>
        </div>
    </div>
</template>

<script>
import empty from "./empty.vue";
import { mapGetters } from "vuex";

let timeout = null;
export default {
    components: {
        empty,
    },
    props: [
        "searchform",
        "search_type_data",
        "placeholder",
        "preselection_list",
        "resultTips_list",
        "customer_list_data",
        "total",
        "top_num",
        "top_num_screen",
    ],
    computed: {
        ...mapGetters(["isExpand"]),
    },
    data() {
        return {
            is_select_show_list: false,
            is_data_show_list: false,
            is_focus: false,
            is_show_preselection: false,
            is_show_customer_list: false,
            is_show_resultTips: false,
            color_data: [
                "#3989fc",
                "#ee464b",
                "#19c56b",
                "#fd641c",
                "#3989fc",
                "#ee464b",
            ],
        };
    },

    methods: {
        // 防抖
        testFun(fun, time = 500) {
            console.log("11");
            if (timeout) {
                clearTimeout(timeout); // 规定时间内若定时器存在则清除
            }
            timeout = setTimeout(() => {
                console.log("触发点击");
                fun(); // 调用接口
            }, time);
        },

        // 结果列表滚动加载
        loadFun() {
            this.$emit("loadFun");
        },
        // 选中搜索结果
        determineFun(item) {
            this.$emit("determineFun", item);
        },
        // 选中预选分类
        preselectionFun(item) {
            this.is_show_preselection = false;
            this.is_show_resultTips = false;
            this.is_show_customer_list = true;
            this.$emit("preselectionFun", item);
        }, // 回车搜索
        accountLogin() {
            this.is_show_preselection = false;
            this.is_show_resultTips = false;
            this.is_show_customer_list = true;
            this.$emit("accountLogin");
        },
        // 选中结果分类
        resultTipsFun(item) {
            this.is_show_preselection = false;
            this.is_show_resultTips = false;
            this.is_show_customer_list = true;
            this.$emit("resultTipsFun", item);
        },
        // 显示搜索类型
        showSelectFun() {
            this.is_select_show_list = !this.is_select_show_list;
            // this.is_data_show_list = false;
            this.$emit("showSelectFun");
        },
        // 选中搜索类型
        cheSelectvalue(item) {
            this.$emit("cheSelectvalue", item);
        },

        searchFun() {
            // 关闭
            if (this.is_focus) {
                this.is_focus = false;
                this.is_data_show_list = false;
                this.is_select_show_list = false;
                this.is_show_customer_list = false;
                this.$emit("closeFun");
            } else {
                // 搜索
                // this.$emit("searchFun");
            }
        },
        // 关闭数据列表下拉
        focusFun() {
            this.is_data_show_list = true;
            this.is_focus = true;
            this.is_select_show_list = false;
            if (!this.searchform.kw) {
                this.is_show_preselection = true;
            }
            this.$emit("showSelectFun");
        },
        inputFun() {
            if (!this.searchform.kw) {
                this.is_show_preselection = true;
            } else {
                this.is_show_preselection = false;
                this.is_show_customer_list = false;
                this.is_show_resultTips = true;
                this.testFun(this.getinputFun);
            }
        },
        getinputFun() {
            this.$emit("inputFun");
        },
    },
};
</script>
<style lang="scss" scoped>
.arrow-search {
    position: absolute;
    left: 10px;
    // top: 16px;
    width: 40px;
    height: 40px;
    text-align: center;
    cursor: pointer;
    color: #999;
    text {
        font-size: 22px;
    }
}
.i-search {
    width: 22px;
    height: 22px;
    text-align: center;
    position: absolute;
    right: 20px;
    top: 0;
    cursor: pointer;
    color: #999;
    text {
        font-size: 22px;
    }
}
.search-box-pax {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    position: absolute;
    padding: 0 10px;
    // left: 7px;
    top: -88px;
    .input-box {
        width: 100%;
        box-sizing: border-box;
        background: #f8f8f8;
        border-radius: 30px;
        padding: 0 35px;
        input {
            font-size: 14px;
        }
        ::v-deep.el-input {
            .el-input__inner {
                background: transparent;
                border: none;
                padding: 0;
                &::placeholder {
                    color: grey;
                }
            }
            
        }
    }
    .lower-icon {
        font-size: 24px;
        cursor: pointer;
        color: #999;
        &:hover {
            color: #217cf9;
        }
    }
    .list-select {
        width: 345px;
        height: 100%;
        position: fixed;
        left: 240px;
        top: 103px;
        z-index: 1000;
        transition: background 0.3s;
        overflow: hidden;
        font-size: 14px;

        &.list-zindex {
            z-index: 9999;
        }
        &.list-acitve {
            pointer-events: none;
        }
        .type-list-box {
            width: 100%;
            transition: all 0.3s;
            background: #f8f8f8;
            position: absolute;
            left: 0;
            top: 0;
            .list-row {
                cursor: pointer;
                font-size: 15px;
                padding-left: 20px;
                margin-bottom: 10px;
                &:last-child {
                    margin-bottom: 0;
                }
                &:hover {
                    background: #ddd;
                }
                &.acitve {
                    color: #459ffd;
                }
            }
        }
        .data-list-box {
            width: 100%;
            height: 100%;
            background: #fff;
            .total-box {
                font-size: 14px;
                padding: 20px 10px;
            }

            .preselection-list-box {
                width: 100%;
                height: calc(100% - 175px);
                background: #fff;
                overflow: auto;
                .list-row {
                    display: flex;
                    justify-content: space-between;
                    padding: 10px;
                    border-bottom: 1px solid #ececec;
                    cursor: pointer;
                    &:hover {
                        background: #ddd;
                    }
                }
            }
            .tips-list-box {
                width: 100%;
                height: calc(100% - 175px);
                background: #fff;
                overflow: auto;
                .list-row {
                    display: flex;
                    justify-content: space-between;
                    padding: 10px;
                    border-bottom: 1px solid #ececec;
                    cursor: pointer;
                    &:hover {
                        background: #ddd;
                    }
                }
            }
            .customer-list-box {
                height: calc(100vh - 175px);
                overflow: auto;
                .list-row {
                    padding: 10px 0;
                    padding-left: 10px;
                    border-bottom: 1px #f2f2f2 solid;
                    display: flex;
                    cursor: pointer;
                    .img-box {
                        width: 80px;
                        height: 80px;
                        margin-right: 10px;
                        border-radius: 5px;
                        background: #eaeaea;
                        overflow: hidden;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                        span {
                            font-size: 16px;
                            font-weight: bold;
                        }
                    }
                    .info-box {
                        width: calc(100% - 90px);
                        .title {
                            font-size: 14px;
                        }
                        .phone {
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            font-size: 12px;
                            color: #9c9a9a;
                        }
                        .price {
                            font-size: 14px;
                            color: #f36b6e;
                        }
                        .tag-box {
                            span {
                                border-radius: 3px;
                                background: #3388ff;
                                color: #fff;
                                font-size: 12px;
                                padding: 2px 4px;
                                margin-right: 5px;
                            }
                        }
                        .tiem {
                            font-size: 12px;
                        }
                    }
                    &:hover {
                        background: #fdf6f6;
                    }
                }
            }
        }
    }
}
</style>